<template>
    <div class="">
        <h4 class="margin_bottom20">数据库表列表</h4>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <el-button type="primary" size="small" @click="generate"><i class="iconfont icon-plus"></i>生成代码</el-button>
                <!--<el-button type="primary" size="small" @click="delete" icon="delete">删除</el-button>-->
              </el-col>
            <el-col :span="6">
                <el-input placeholder="搜索..." size="small" v-model="searchKey"><el-button slot="append" icon="search" @click="loadData"></el-button></el-input>
            </el-col>
        </el-row>
        <template>
            <el-table :data="tableData" border style="width: 100%; text-align: center;margin-top:10px;" v-loading.body="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="tableName" header-align="center" label="表名"></el-table-column>
                <el-table-column prop="engine" header-align="center" label="数据库引擎"></el-table-column>
                <el-table-column prop="tableComment" header-align="center" label="表注释"></el-table-column>
                <el-table-column prop="createTime" header-align="center" label="创建时间"></el-table-column>
                
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20,50,100,200]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </template>
        
       
    </div>
</template>
<script>
import Editor from '../../components/editor.vue'
    export default {
        data (){
            return {
                tableData: [],
                currentPage: 1,
                total: 0,
                limit: 20,
                searchKey: '',
                loading: false,
                table: {
                    tableName: '',
                    engine: '',
                    tableCommnet: '',
                    createTime: ''
                },
                formLabelWidth: '120px',
                multipleSelection: []
            }
        },
        methods : {

            loadData() {
                this.loading = true;
                this.$http.get(API.rootPath + "/tables", {params:{offset: this.limit*(this.currentPage - 1), limit: this.limit, searchKey: this.searchKey, companyId: localStorage.companyId}}).then((response) => {

                    this.tableData = response.body.data.rows;
                    this.total = response.body.data.total;
 
                    this.loading = false;
                }, (response) => {
                    // error callback
                }); 
            },
            generate() {
                let tableNames = '';
                this.multipleSelection.forEach(select => {
                    tableNames = tableNames + select.tableName + "," 
                });
                this.$http.post(API.rootPath + "/generate", '' , {params:{tableNames: tableNames}}).then((response) => {

                }, (response) => {
                    // error callback
                });
            },
             handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
                //引入文本编辑器那个组件
        components: {
            'v-editor': Editor
        },
        created() {
            this.loadData();
        }
    }
</script>
<style>
.el-dialog--small {
    width: 60%;
}
</style>
